<!--
 * @Author: CarlYang
 * @Date: 2021-07-21 10:11:00
 * @LastEditTime: 2021-08-16 09:49:48
 * @LastEditors: DESKTOP-PNCL084
 * @Description: In User Settings Edit
 * @FilePath: \vue-g6\src\App.vue
-->
<template>
  <div id="app">
    <div id="nav">
      <ul>
        <!-- <li>
          <router-link to="/">G6实现企业关系图谱</router-link>
        </li>
        <li>
          <router-link to="/algorithmcategory">G6实现紧凑树</router-link>
        </li> -->
        <!-- <li>
          <router-link to="/morerelation">GraphVis实现小米关系图</router-link>
        </li> -->
        <li>
          <router-link to="/">GraphVis实现组织关系图</router-link>
        </li>
        <li>
          <router-link to="/companygraphvis">GraphVis实现企业关系图谱</router-link>
        </li>
        <li>
          <router-link to="/sanguo">GraphVis实现三国演义任务关系</router-link>
        </li>
      </ul>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
@import url("./assets/style/reset.scss");
@import url("./assets/style/element.scss");
#nav {
  padding: 20px;
  margin: 5px;
  ul {
    display: flex;
    justify-content: center;
    li {
      border-right: solid 2px #2c3e50;
      padding: 0 20px;
      a {
        color: #2c3e50;
        text-decoration: none;
        font-weight: 700;
      }
      &:last-child {
        border-right: none;
      }
    }
  }
}
#container {
  border: 2px #000 solid;
  background-color: #9dadc1;
  width: calc(100% - 4px);
  height: calc(100vh - 75px);
}
</style>
